<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="7" class="mian-aside">
                <customer :keys="keys"></customer>
            </el-col>
            <el-col :span="17">
                <el-card class="box-card" style="min-height: 200px;">
                    <h3>我的粉丝用户({{page.total}})</h3>
                    <el-divider></el-divider>
                    <el-row v-for="item in fansListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="24">
                            <div class="title-cusor" @click="showFFDetail(item.follower_id)">
                                <avue-avatar size="large" :src="item.avatar"></avue-avatar>
                                &nbsp;
                                <el-link type="primary">{{item.nickname}}</el-link>
                            </div>
                        </el-col>
                    </el-row>
                    <avue-empty v-if="fansListData.length === 0" desc="您还没有粉丝">
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import customer from '../../../components/customer'
    export default {
        data() {
            return {
                keys: 'fance',
                fansListData: [],
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
            }
        },
        components: {
            customer
        },
        created() {
            this.followerFanceList()
        },
        methods: {
            handleCurrentChange (currentPage) {
                this.page.currentPage = currentPage
                this.followerFanceList()
            },
            showFFDetail(userId) {
                this.$router.push({path: `/custuser/${userId}`})
            },
            followerFanceList() {
                const _this = this
                const params = {
                    // key: _this.keys,
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.followerFanceList, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.fansListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.fansListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.fansListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.fansListData = []
                    _this.page.total = 0
                })
            },
        }
    }
</script>

<style>
    .el-tag {
        background-color: #ecf5ff;
        border-color: #d9ecff;
        display: inline-block;
        height: 25px;
        padding: 0 10px;
        line-height: 22px;
        font-size: 12px;
        color: #409EFF;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .title-cusor {
        cursor: pointer;
    }
    .title-cusor:hover {
        color: #409EFF;
    }
</style>
